<template>
  <div class="cards-area">
    <div class="activityLine"> 课堂活动记录 </div>
    <div class="c">
      <div
        v-for="(course, index) in courses" 
        :key="index"
        class="c_card"
        :style="{
          backgroundColor: `${courseMap[course.course_type]['color']}`,
        }"
        @click="selectCourse(course)"
      >
      <div class="c_card_wh">
        <div class="c_card_wh_header">
          <span class="c_card_wh_header_tag"> {{ course.evaluation }}</span>
        </div>
        <div class="c_card_wh_body">
          <span class="c_card_wh_body_number">{{
            course.lesson_name
          }}</span>
          <span class="c_card_wh_body_name">{{ courseMap[course.course_type]["name"] }}</span>
        </div>
        <div class="c_card_wh_footer">
          <span class="c_card_wh_footer_tag">共{{ course.total_study_hours }}课时</span>
        </div>
        <div class="c_card_wh_icon">
          <a-icon
            :type="courseMap[course.course_type]['icon']"
          />
        </div> 
      </div>
      </div>
    </div>
    <div v-if="coursehours.length != 0">
      <div class="activityLine"> 
        课程名:{{ lessonName }}
      </div>
      <div class="courseHours">
        <div class="courseHours-title">课时名</div>
        <div class=courseHours-cardgroup>
            <div
              class="courseHours-cardgroup-card"
              v-for="(courseHour, index) in coursehours"
              :key="index"
              @click="selectCourseHour(courseHour.name)"
            >
              <div class="courseHours-cardgroup-card-name">{{ courseHour.name }}</div>
            <!-- <div class="courseHours-card-class"
                v-for="(classItem, index) in classList"
                :key="index"
                >
                  {{ classItem }}
                </div>-->
            </div>
        </div>
        </div>
      
    </div>
    <div v-if="classList.length != 0">
      <!-- classList -->
      <div class="activityLine"> 
         课时名:{{ courseHourName }}
      </div>
      <div class="courseHours">
       <div class="courseHours-title">班级名</div>
       <div class="courseHours-cardgroup">
            <div class="courseHours-cardgroup-card"
              v-for="(classItem, index) in classList"
              :key="index"
              style="background-color:#a8e5e7"
              @click="selectClass(classItem)"
            >
              <div class="courseHours-cardgroup-card-name">{{ classItem }} </div>
            </div>
        </div>
      </div>
    </div>
    <div v-if="filterActivityMessages.length">
      <div
        v-for="(activityMessage, index) in filterActivityMessages"
        :key="index"
      >
        <!-- 抢答 -->
        <activityItem
          v-for="(item) in activityMessage.race_data"
          :key="item._id"
          activityTitle="抢答"
          :activityData="item"
        ></activityItem>
        <!-- 提问 -->
        <activityItem
          v-for="(item) in activityMessage.question_data"
          :key="item._id"
          activityTitle="提问"
          :activityData="item"
        ></activityItem>
        <!-- 投票 -->
        <div v-for="vote in activityMessage.vote_data" :key="vote._id">
          <activityItem
            v-for="(item) in vote.record"
            :key="item._id"
            activityTitle="投票"
            :activityData="item"
          ></activityItem>
        </div>
        <!-- 随堂测试 -->
        <div v-for="test in activityMessage.test_data" :key="test._id">
          <activityItem
            v-for="(item) in test.record"
            :key="item._id"
            activityTitle="随堂测试"
            :activityData="item"
          ></activityItem>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import courseLayout from "@/utils/userConst";
import { mapState } from "vuex";
import axios from "@/utils/axios";
import activityItem from "./activityItem/activityItem";

export default {
  components: { activityItem },
  data() {
    return {
      // 用于显示的数据
      lessonName: "",
      courseHourName: "",
      className: "",
      courseMap: courseLayout.courseMap,
      coursehours: [],
      // 活动数据
      activityMessages: [],
      classList: [], //活动信息班级树
      filterActivityMessages: [],
    };
  },
  methods: {
    async getCourseHour(lessonId) {
      await this.$store.dispatch("teacher/getCourseHours", {
        lesson_id: lessonId,
        teacher_id: this.uid,
      });
      this.coursehours = this.$store.getters["teacher/courseHours"];
    },
    async selectCourse(course) {
      console.log(
        "🚀 ~ file: courseActivity.vue ~ line 78 ~ selectCourse ~ course",
        course
      );
      this.lessonName = course.lesson_name;
      let url = "/pc/v1/activities/" + course._id;
      let { data } = await axios.get(url);
      // 除去无用的活动信息
      this.activityMessages = data.data.filter((item) => {
        return item.end_time;
      });
      this.getCourseHour(course._id);
    },
    async selectCourseHour(courseHourName) {
      this.courseHourName = courseHourName;
      // 根据活动信息建立班级树
      this.activityMessages.forEach((activityMessage) => {
        if (this.classList.indexOf(activityMessage.className) < 0) {
          this.classList.push(activityMessage.className);
        }
      });
    },
    async selectClass(classItem) {
      this.className = classItem;
      this.filterActivityMessages = this.activityMessages.filter(
        (activityMessage) => {
          return (
            activityMessage.courseHourName == this.courseHourName &&
            activityMessage.className == classItem
          );
        }
      );
      console.log(
        "🚀 ~ file: courseActivity.vue ~ line 231 ~ selectClass ~ this.filterActivityMessages",
        this.filterActivityMessages
      );
    },
  },
  computed: {
    containerHeight() {
      const height = window.innerHeight;
      return `${height - 220}px`;
    },
    ...mapState({
      uid: (state) => state.public.uid,
      courses: (state) => state.teacher.courses,
    }),
  },
  filters: {
    progressFilter({ prepareNumber, total_study_hours }) {
      return `已备${prepareNumber}课时/共${total_study_hours}课时`;
    },
  },
  mounted() {
    this.$store.dispatch("teacher/getTeacherCourses", this.uid);
  },
};
</script>

<style lang="scss" >
/*.container {
  height: 100%;
  overflow-y: auto;
  margin-top: 10px;
  margin-left: 10px;
}*/
/* .courseHours {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.courseHour {
  width: 10%;
  height: 200px;
} */
/*.space {
  cursor: pointer;
  margin: 5px 5px 15px 15px;
}*/
.activityLine{
  position: relative;
  text-align: center;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.85);
   font-family: 'Comic Sans MS', cursive, sans-serif;
  font-weight: 500;
  font-size: 20px;
  margin: 20px 10px;
}
.activityLine::before,.activityLine::after{
  content: "";
  display: inline-block;
  width:45%;
  height: 1px;
  position:absolute;
  background:  #4ABAC4;
  top:50%
}
.activityLine::before{
  margin-left: -10px;
  transform: translateX(-100%);
}
.activityLine::after{
  margin-left: 10px;
}
</style>
